<!DOCTYPE html>
<html>
<head>
<title>Bar Meter</title>
<script src="../lib/zeu.js"></script>
<script src="examples.js"></script>
<link rel="stylesheet" href="example.css">
</head>
<body>
  <div class="container">
    <h3>Default Size</h3>
    <pre><code>
width: 100px; 
height: 200px;
    </code></pre>

    <h3>Default</h3>
    <pre><code>
var barMeter1 = new zeu.BarMeter(document.getElementById('bar-meter-1'));
    </code></pre>
    <div id="bar-meter-1" style="width: 100px; height: 200px;"></div>

    <h3>Options</h3>
    <pre><code>
var barMeter2 = new zeu.BarMeter(
  document.getElementById('bar-meter-2'), {
    min: -100,
    max: 100,
    value: 80,
    dashColor: 'white',
    barColor: 'red',
    speed: 10
  });
barMeter2.value = 60;
barMeter2.dashColor = 'green';
barMeter2.barColor = 'blue';
    </code></pre>
    <div id="bar-meter-2" style="width: 100px; height: 200px;"></div>

    <h3>Size X 2</h3>
    <div id="bar-meter-3" style="width: 200px; height: 400px;"></div>
  </div>
</div>

<script type="text/javascript">

  var barMeter1 = new zeu.BarMeter(document.getElementById('bar-meter-1'));

  var barMeter2 = new zeu.BarMeter(
    document.getElementById('bar-meter-2'), {
      min: -100,
      max: 100,
      value: 80,
      dashColor: 'white',
      barColor: 'red',
      speed: 10
    });
  barMeter2.value = 60;
  barMeter2.dashColor = 'green';
  barMeter2.barColor = 'blue';

  var barMeter3 = new zeu.BarMeter(document.getElementById('bar-meter-3'));

</script>
</body>
</html>
